This is awesome @codingluke! Indeed on our app this speeds up recompilation time ~3x.

Maybe we could organize the files a bit differently such as:

stylesheets/
  components/
  base.scss
  components.scss
  tailwind.config.js
  utilities.css

// base.scss

// This injects Tailwind's base styles, which is a combination of Normalize.css and additional base styles.
@import 'tailwindcss/base';

// Add custom base styles, applied after the tailwind-base classes

// components.scss
`@import 'tailwindcss/components';`
  
 // Custom components....

// utilities.scss

// This injects all of Tailwind's utility classes, generated based on your config file.
@import 'tailwindcss/utilities';

// Include vendor css.

// application.js

// These are imported separately for faster Webpack recompilation
import "stylesheets/base.scss"
import "stylesheets/components.scss"
import "stylesheets/utilities.scss"

Hi @dixpac, Thanks for your input :)

I see your point! However, isn't application.scss kind of a convention name in Rails? Also I am not sure if the custom CSS can go directly after the `@import "tailwindcss/base". I have to check the benchmarks first.
Anyways, before I spend too much time, I would like to have @dhh feedback for the naming as naming is hard ;)

@dixpac, I just checked the benchmarks, it is totally fine with your structure too 👍 So when everybody can confirm on this I will adapt it.